<template>
  <div id="profile">
      <nav-bar id="profile_navbar"><div slot="center">用户</div></nav-bar>

      <user-info class="user-info"/>

      <account class="account" />
      <list-view :list-data="orderList" class="order-list" />
      <list-view :list-data="serviceList" class="service-list" />
  </div>
</template> 

<script>
// 导入字体图标库
// import IconFont from 'assets/icon-font/iconfont.js';
// 导入组件
import UserInfo from './childComps/UserInfo';
import Account from './childComps/Account';
import ListView from './childComps/ListView';
//导入公共组件
import NavBar from 'components/common/navbar/navbar';

export default {
  name: 'Profile',
  components: {
    UserInfo,
    Account,
    ListView,
    NavBar
  },
  data: function() {
    return {
      orderList: [
        { icon: '#icon-wodexiaoxi', info: '我的消息' },
        { icon: '#icon-jfsc', info: '积分商城' },
        { icon: '#icon-membership-card_icon', info: '会员卡' }],
 serviceList: [ 
				 { icon: '#icon-cart-Empty', info: '我的购物车' }, 
				 { icon: '#icon-download', info: '下载购物APP' }] 
				 }; 
				 },  
 mounted: function() {} 
 
 }; 
 
 </script> 
 
 <style scoped> 
	 #profile { 
     padding-top: 30px;
		 height: 100vh; 
		 position: relative;
		 background-color: #f2f2f2; 
		 
	 } 
   #profile_navbar{
    font-size: 16px;
    background-color: var(--color-tint);
    text-align: center;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
	 
	 .nav-bar { 
		 background-color: var(--color-tint); 
		 color: #fff;
	 }
	.order-list, 

	.service-list, 

	.account,.user-info{ 

		margin-top: 12px; 

	} 


</style>